import React, { Component } from "react";
import "./index.css";
export default class Item extends Component {
  state = { mouse: false };
  hanlerMouse = () => {
      this.setState({mouse:true})
  };
  leaveMouse = () => {
    this.setState({mouse:false})
  };
  hanlerCheck = (id) => {
    return(event)=>{
      this.props.changeTodo(id,event.target.checked)
    }
  };
  clearHandler= (id)=>{
    return ()=>{
      if(window.confirm('确定删除吗？')){
        this.props.delTodo(id)
      }
    }
  }

  render() {
    const { name, done,id } = this.props;
    return (
      <li onMouseEnter={this.hanlerMouse}  onMouseLeave={this.leaveMouse}>
        <label>
          <input type="checkbox" checked={done} onChange={this.hanlerCheck(id)}/>
          <span>{name}</span>
        </label>
        <button className="btn btn-danger" onClick={this.clearHandler(id)} style={{ display: this.state.mouse ? 'block' : 'none' }}>
          删除
        </button>
      </li>
    );
  }
}
